<template>
  <div class="all_music">
    <div class="all_poptip">
      <!-- 全部歌单标签 -->
      <b-poptip ref="poptip" theme="light" placement="bottom-start" max-length="520px" @show="handlePoptipShow" @hidden="handlePoptipHidden" class="poptip">
        <div class="poptip_them">
          <span>{{ cat }}</span>
          <i class="vbestui-iconfont icon-qian"></i>
        </div>
        <!-- 歌单标题 -->
        <template v-slot:title>
          <div class="pop-title">全部歌单分类</div>
        </template>
        <!-- 歌单分类列表 -->
        <template v-slot:content>
          <Scroll class="pop-scroll" ref="scroll">
            <div @mouseenter="handleRefresh">
              <div class="pop_btn">
                <b-button size="long" height="35px" round @click="handleAllPlaylist">全部歌单</b-button>
              </div>
              <div class="cate_item" v-for="(item, index) in category" :key="index">
                <div class="cate_item_left">
                  <i :class="['iconfont', `${iconList[index]}`]"></i>
                  <span>{{ categories[index] }}</span>
                </div>
                <div class="cate_item_right">
                  <b-button width="80px" height="35px" v-for="(keys, index1) in item" :key="index1" @click="handlePlaylistItme(index, index1)">{{ keys.name }}</b-button>
                </div>
              </div>
            </div>
          </Scroll>
        </template>
      </b-poptip>

      <!-- 热门标签 -->
      <div class="menu">
        <div class="menu_title"><span>热门标签:</span></div>
        <div class="menu_list">
          <span class="tage" :class="{ tageaction: index === actionIndex }" v-for="(item, index) in hotTags" :key="index" @click="handleMenuItem(index)">{{ item.name }}</span>
        </div>
      </div>

      <!-- 歌单内容区块 -->
      <div class="all_musiclist">
        <MusicList :muiscList="playList"></MusicList>
      </div>

      <!-- 分页 -->
      <div class="all_pagination">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-sizes="[20, 30, 40, 50]" :current-page="offset" layout="total, sizes, prev, pager, next, jumper" :total="total"> </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import { _getCartList, _highqualityTags, _MusicHot } from '../../network/music-list'
import Scroll from '../../components/common/scroll/scroll'
import { forcible } from '../../mixin/comm/forcible-refresh'
import MusicList from '../../components/content/muisc-list/MuiscList.vue'
export default {
  name: 'Allmusiclist',
  data() {
    return {
      iconList: ['icon-global', 'icon-music', 'icon-kafei', 'icon-biaoqing', 'icon-huatizhuti'], // icon字体
      categories: [], // 歌单分类标题
      category: [], // 歌单分类标签
      hotTags: [], // 热门标签
      playList: [], // 歌单列表
      cat: '全部', // tag标签
      isPoptip: false, // 显示隐藏
      limit: 20, // 歌单数量
      offset: 1, // 分页
      actionIndex: 0,
      total: 0, // 总共数量
      currentPage: 20
    }
  },
  components: { Scroll, MusicList },
  mixins: [forcible],
  created() {
    this.initData()
  },
  computed: {
    getOffset() {
      return this.offset * this.limit
    }
  },
  methods: {
    // 获取初始化数据
    async initData() {
      // 获取热门标签
      const hot = await _MusicHot()
      this.hotTags = hot.data.tags

      // 获取所有分类标签
      const res = await _getCartList()
      this.categories = Object.values(res.data.categories)
      const sub = res.data.sub
      Object.keys(this.categories).forEach((item) => {
        this.category[item] = sub.filter((keys) => keys.category == item)
      })
      this.handleAllPlaylist()
    },
    handleSizeChange(pageSize) {
      this.limit = pageSize
      this.highquality()
    },
    handleCurrentChange(pageNum) {
      this.offset = pageNum
      this.highquality()
    },
    // 热门标签点击
    handleMenuItem(index) {
      this.cat = this.hotTags[index].name
      this.actionIndex = index
      this.highquality()
    },
    // 全部歌单tag点击
    handleAllPlaylist() {
      this.cat = '全部'
      this.highquality()
      this.offset = 1
      this.$refs.poptip.hidden()
    },
    // 全部分类某个tag点击按钮
    handlePlaylistItme(index, index1) {
      this.cat = this.category[index][index1].name
      this.offset = 1
      this.highquality()
      this.$refs.poptip.hidden()
    },
    // 获取标签请求
    highquality() {
      _highqualityTags(this.cat, this.getOffset).then((res) => {
        this.playList = res.data.playlists
        this.total = res.data.total
      })
    },
    // 显示
    handlePoptipShow() {
      this.isPoptip = true
    },

    // 隐藏
    handlePoptipHidden() {
      this.isPoptip = false
    }
  }
}
</script>

<style lang="less" scoped>
.scroll {
  height: 100%;
}
.all_music {
  width: 80%;
  height: calc(100vh - 120px);
  margin: 0 auto;
  .all_poptip {
    padding: 20px 0;
    .poptip_them {
      width: 80px;
      height: 40px;
      border: 1px solid #e2e2e2;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    // .pop-scroll {
    //   height: 300px;
    // }
    .pop_btn {
      padding: 10px 0;
    }
    .cate_item {
      width: 100%;
      padding: 10px 0px;
      display: flex;
      justify-items: center;
      align-items: center;
      .cate_item_left {
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        .iconfont {
          padding-right: 5px;
        }
      }
      .cate_item_right {
        flex: 5;
        display: flex;
        flex-wrap: wrap;
      }
    }
  }
}
.menu {
  width: 100%;
  height: 40px;
  margin-top: 10px;
  display: flex;
  .menu_title {
    width: 10%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    color: #000;
  }
  .menu_list {
    width: 90%;
    display: flex;
    .tage {
      width: 10%;
      height: 40px;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 14px;
      color: #000;
    }
    .tageaction {
      color: var(--primary);
    }
  }
}
.all_musiclist {
  padding: 10px 0;
}
.all_pagination {
  display: flex;
  justify-content: center;
  padding-top: 20px;
}
</style>
